<template>
  <div class="hello">
    <div id="container"></div>
  </div>
</template>

<script>
	import dd from '../assets/custom_map_config.json'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
	  this.$nextTick(function(){
		  this.hangleMap();
	  })
  },
  methods:{
	  // 地图加载
	  hangleMap(){
		  // 百度地图API功能
		  	var map = new BMapGL.Map("container");
		  	var point = new BMapGL.Point(119.020173, 29.077973);
		     map.centerAndZoom(point, 15);
			 map.addControl(new BMapGL.NavigationControl());
			
			
			
			 // // 画直线的
			 // var polyline = new BMapGL.Polyline([
			 //   //new BMap.Point(116.399, 39.910),
			 //   new BMapGL.Point(119.020173, 29.077973),
			 //   new BMapGL.Point(119.01555,29.107759),
			 //   new BMapGL.Point(118.999564,29.102301),
			 // // new BMap.Point(116.415,39.92936),
			 // ], {strokeColor:"#03D3FF", strokeWeight:3, strokeOpacity:0.5,fillColor:"red",});
			 // map.addOverlay(polyline);
			 // addArrow(polyline,10,Math.PI/7);
			  
			 // function addArrow(polyline,length,angleValue){ //绘制箭头的函数
			 // var linePoint=polyline.getPath();//线的坐标串
			 // var arrowCount=linePoint.length;
			 // for(var i =1;i<arrowCount;i++){ //在拐点处绘制箭头
			 // var pixelStart=map.pointToPixel(linePoint[i-1]);
			 // var pixelEnd=map.pointToPixel(linePoint[i]);
			 // var angle=angleValue;//箭头和主线的夹角
			 // var r=length; // r/Math.sin(angle)代表箭头长度
			 // var delta=0; //主线斜率，垂直时无斜率
			 // var param=0; //代码简洁考虑
			 // var pixelTemX,pixelTemY;//临时点坐标
			 // var pixelX,pixelY,pixelX1,pixelY1;//箭头两个点
			 // if(pixelEnd.x-pixelStart.x==0){ //斜率不存在是时
			 // 	pixelTemX=pixelEnd.x;
			 // 	if(pixelEnd.y>pixelStart.y)
			 // 	{
			 // 	pixelTemY=pixelEnd.y-r;
			 // 	}
			 // 	else
			 // 	{
			 // 	pixelTemY=pixelEnd.y+r;
			 // 	}	
			 // 	//已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
			 // 	pixelX=pixelTemX-r*Math.tan(angle); 
			 // 	pixelX1=pixelTemX+r*Math.tan(angle);
			 // 	pixelY=pixelY1=pixelTemY;
			 // }
			 // else  //斜率存在时
			 // {
			 // 	delta=(pixelEnd.y-pixelStart.y)/(pixelEnd.x-pixelStart.x);
			 // 	param=Math.sqrt(delta*delta+1);
			  
			 // 	if((pixelEnd.x-pixelStart.x)<0) //第二、三象限
			 // 	{
			 //     pixelTemX=pixelEnd.x+ r/param;
			 //     pixelTemY=pixelEnd.y+delta*r/param;
			 // 	}
			 // 	else//第一、四象限
			 // 	{
			 //     pixelTemX=pixelEnd.x- r/param;
			 //     pixelTemY=pixelEnd.y-delta*r/param;
			 // 	}
			 //     //已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
			 // 	pixelX=pixelTemX+ Math.tan(angle)*r*delta/param;
			 //     pixelY=pixelTemY-Math.tan(angle)*r/param;
			  
			 //     pixelX1=pixelTemX- Math.tan(angle)*r*delta/param;
			 //     pixelY1=pixelTemY+Math.tan(angle)*r/param;
			 // }
			  
			 // var pointArrow=map.pixelToPoint(new BMapGL.Pixel(pixelX,pixelY));
			 // var pointArrow1=map.pixelToPoint(new BMapGL.Pixel(pixelX1,pixelY1));
			 // var Arrow = new BMapGL.Polyline([
			 //     pointArrow,
			 //     linePoint[i],
			 //     pointArrow1
			 // ], {strokeColor:"#03D3FF", strokeWeight:3, strokeOpacity:0.5});
			 // map.addOverlay(Arrow);
			 // }
			 // }
			 
			 
			 
			 
			 // 添加路线
			 
			 
			   var sy = new BMapGL.Symbol(BMapGL_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
			     scale: 0.6,//图标缩放大小
			     strokeColor:'#fff',//设置矢量图标的线填充颜色
			     strokeWeight: '2',//设置线宽
			   });
			 var icons = new BMapGL.IconSequence(sy, '10', '30');
			 
			 // 创建polyline对象
			 var pois = [
			     new BMapGL.Point(116.350658,39.938285),
			     new BMapGL.Point(116.386446,39.939281),
			     new BMapGL.Point(116.389034,39.913828),
			     new BMapGL.Point(116.442501,39.914603)
			 ];
			 var polyline =new BMapGL.Polyline(pois, {
			    enableEditing: false,//是否启用线编辑，默认为false
			    enableClicking: true,//是否响应点击事件，默认为true
			    icons:[icons],
			    strokeWeight:'8',//折线的宽度，以像素为单位
			    strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
			    strokeColor:"#18a45b" //折线颜色
			 });
			 var startPoint=new BMapGL.Point(116.432045,39.910683),
			     middlePoint=new BMapGL.Point(116.395645,39.93397),
			     endPoint=new BMapGL.Point(116.416917,39.888588);
			 var points = [startPoint,middlePoint, endPoint];
			 
			 var curve = new BMapGL.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象
			 map.addOverlay(curve); //添加到地图中
			 curve.enableEditing(); //开启编辑功能
			 map.addOverlay(polyline);//增加折线
	  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #container {
        overflow: hidden;
        width: 100%;
        height: 100vh;
        margin: 0;
    }
    .info {
        z-index: 999;
        width: auto;
        min-width: 22rem;
        padding: .75rem 1.25rem;
        margin-left: 1.25rem;
        position: fixed;
        top: 1rem;
        background-color: #fff;
        border-radius: .25rem;
        font-size: 14px;
        color: #666;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    ul li {
        list-style: none;
    }
    .drawing-panel {
        z-index: 999;
        position: fixed;
        bottom: 3.5rem;
        margin-left: 3rem;
        padding: 1rem 1rem;
        border-radius: .25rem;
        background-color: #fff;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    .btn {
        width: 75px;
        height: 30px;
        float: left;
        background-color: #fff;
        color: rgba(27, 142, 236, 1);
        font-size: 14px;
        border:1px solid rgba(27, 142, 236, 1);
        border-radius: 5px;
        margin: 0 5px;
        text-align: center;
        line-height: 30px;
    }
    .btn.current {
        background-color: rgba(27, 142, 236, 1);
        color: #fff;
    }
    .btn:hover {
        background-color: rgba(27, 142, 236, 0.8);
        color: #fff;
    }
</style>
